<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-form
  [formGroup]="formGroup"
  [lvLabelColon]="false"
  class="formGroup create-fileset"
>
  <lv-form-item>
    <lv-form-label lvRequired>{{ 'common_name_label' | i18n }}</lv-form-label>
    <lv-form-control class="select" [lvErrorTip]="filesetNameErrorTip">
      <input lv-input formControlName="name" class="fileset-control" />
    </lv-form-control>
  </lv-form-item>
  <lv-form-item>
    <lv-form-label lvRequired>
      {{ 'protection_selecting_host_label' | i18n }}
    </lv-form-label>
    <lv-form-control class="select">
      <lv-select
        class="fileset-control"
        [lvOptions]="hostOptions"
        lvValueKey="value"
        formControlName="selectedHost"
        lvShowFilter
        lvFilterKey="label"
        lvFilterMode="contains"
        [lvDisabled]="!!rowData"
      >
      </lv-select>
    </lv-form-control>
  </lv-form-item>
  <lv-form-item *ngIf="isWindows">
    <lv-form-label lvRequired>
      {{ 'common_backup_type_label' | i18n }}
    </lv-form-label>
    <lv-form-control>
      <lv-select
        class="fileset-control"
        [lvOptions]="backupType"
        lvValueKey="value"
        formControlName="backupType"
        lvShowFilter
        lvFilterKey="label"
        lvFilterMode="contains"
      ></lv-select>
    </lv-form-control>
  </lv-form-item>
  <lv-form-item *ngIf="!isWindows">
    <lv-form-label></lv-form-label>
    <lv-form-control>
      <p>
        <label
          lv-checkbox
          formControlName="osBackup"
          [lv-tooltip]="
            isProtected
              ? ('protection_volume_disable_modify_tip_label' | i18n)
              : ''
          "
          [lvDisabled]="isProtected || !hasSystemVolume"
          >{{ 'protection_volume_advanced_backup_label' | i18n }}</label
        >
      </p>
      <lv-group lvGutter="4px">
        <span class="aui-text-help">
          {{ 'protection_volume_need_os_backup_tip_label' | i18n }}
        </span>
      </lv-group>
    </lv-form-control>
  </lv-form-item>
  <lv-form-item>
    <lv-form-label lvRequired>{{
      'protection_volume_label' | i18n
    }}</lv-form-label>
    <lv-form-control class="control-container">
      <lv-group lvGutter="4px">
        <div class="tree-container">
          <div class="tree-tab-title table-title">
            {{ 'protection_selecte_volume_label' | i18n }}
          </div>
          <lv-datatable
            #lvTable
            [lvData]="volumesData"
            lvSize="small"
            [lvScroll]="{ y: '560px' }"
            lvMultiGroup
            lvSelectionMode="multiple"
            [lvSelection]="selectionVolumes"
            (lvSelectionChange)="selectionChange()"
            [lvPaginator]="pageA"
            lvResize
            [lvCompareWith]="isWindows? 'volumeName':'volume'"
            lvResizeMode="expand"
          >
            <thead>
              <tr>
                <th
                  lvShowCheckbox
                  width="40px"
                  [lvRowsData]="lvTable.renderData"
                ></th>
                <th width="160px" lvCellKey="volume">
                  <span lv-overflow
                    >{{ 'common_name_label' | i18n }}
                    <i
                      lv-icon="lv-icon-search"
                      [lvColorState]="true"
                      lv-popover
                      [lvPopoverContent]="nameTpl"
                      lvPopoverTheme="light"
                      lvPopoverPosition="bottom"
                      lvPopoverTrigger="click"
                      #namePopover="lvPopover"
                      [ngClass]="{ active: !!name?.length }"
                    ></i
                  ></span>
                </th>
                <th>
                  <span lv-overflow>{{
                    'common_volume_size_label' | i18n
                  }}</span>
                </th>
                <th
                  width="80px"
                  [(lvFilters)]="typeFilterMap"
                  [lvShowFilter]="true"
                  (lvFilterChange)="filterChange($event)"
                  lvCellKey="type"
                  *ngIf="!isWindows"
                >
                  <span lv-overflow>{{ 'common_type_label' | i18n }} </span>
                </th>
                <th width="80px" *ngIf="!isWindows">
                  <span lv-overflow
                    >{{ 'common_live_mount_point_label' | i18n
                    }}<i
                      lv-icon="lv-icon-search"
                      [lvColorState]="true"
                      lv-popover
                      [lvPopoverContent]="mountTpl"
                      lvPopoverTheme="light"
                      lvPopoverPosition="bottom"
                      lvPopoverTrigger="click"
                      #mountPopover="lvPopover"
                      [ngClass]="{ active: !!mountName?.length }"
                    ></i
                  ></span>
                </th>
                <th *ngIf="isWindows">
                  <span lv-overflow>
                    {{ 'protection_file_system_type_label' | i18n }}
                  </span>
                </th>
                <th *ngIf="isWindows">
                  <span lv-overflow>
                    {{ 'common_tag_label' | i18n }}
                  </span>
                </th>
              </tr>
            </thead>
            <tbody>
              <ng-container *ngFor="let item of lvTable.renderData">
                <tr style="height: 48px;">
                  <td
                    width="64px"
                    lvShowCheckbox
                    [lvRowData]="item"
                    [lvDisabled]="item.disabled"
                  ></td>
                  <td width="200px">
                    <span lv-overflow class="path-overflow">
                      {{ item.volume }}
                    </span>
                  </td>
                  <td>
                    <span lv-overflow class="path-overflow">
                      {{
                        !!item?.size
                          ? (item.size
                            | capacityCalculateLabel
                              : '1.1-3'
                              : unitconst.BYTE
                              : true)
                          : '--'
                      }}
                    </span>
                  </td>
                  <td *ngIf="!isWindows">
                    <span lv-overflow>{{
                      item.type | textMap: 'volumeType'
                    }}</span>
                  </td>
                  <td *ngIf="!isWindows">
                    <span lv-overflow class="path-overflow">
                      {{ item.volumeMountPoints }}
                    </span>
                  </td>
                  <td *ngIf="isWindows">
                    <span lv-overflow>
                      {{ item.fileSystem | nil }}
                    </span>
                  </td>
                  <td *ngIf="isWindows">
                    <span lv-overflow>
                      {{ item.label | nil }}
                    </span>
                  </td>
                </tr>
              </ng-container>
            </tbody>
            <ng-container *ngIf="volumesData.length > 10">
              <lv-paginator
                #pageA
                lvMode="simple"
                lvShowPageSizeOptions="false"
                [lvPageSize]="pageSize"
                [lvPageIndex]="pageIndex"
                [lvTotal]="volumesData.length"
                (lvPageChange)="pageChange($event)"
                class="table-paginator"
              >
              </lv-paginator>
            </ng-container>
          </lv-datatable>
        </div>
        <div class="arrow-container">
          <i lv-icon="aui-select-arrow"></i>
        </div>
        <div class="selected-table">
          <div class="tree-tab-title table-title">
            <span>{{ 'protection_selected_volume_label' | i18n }}</span>
            <span (click)="removeAll()" class="aui-link">
              {{ 'protection_clear_all_label' | i18n }}
            </span>
          </div>
          <lv-datatable
            #lvSelectedTable
            [lvData]="selectedVolumes"
            [lvPaginator]="pageS"
            lvSize="small"
            [lvScroll]="{ y: '480px' }"
          >
            <thead>
              <tr>
                <th lvCellKey="path" lvShowCustom>
                  {{ 'common_volume_path_label' | i18n }}
                </th>
              </tr>
            </thead>
            <tbody>
              <ng-container *ngFor="let item of lvSelectedTable.renderData">
                <tr style="height: 56px;">
                  <td>
                    <lv-group class="select-path-group">
                      <span lv-overflow class="path-overflow">{{
                        item.volume
                      }}</span>
                      <i
                        lv-icon="lv-icon-close"
                        lv-tooltip="{{ 'common_remove_label' | i18n }}"
                        lvTooltipTheme="light"
                        lvColorState="true"
                        (click)="remove(item)"
                        *ngIf="!item.disabled"
                      ></i>
                    </lv-group>
                  </td>
                </tr>
              </ng-container>
            </tbody>
          </lv-datatable>
          <div class="aui-paginator-wrap custom-simple-paginator">
            <lv-paginator
              *ngIf="selectedVolumes.length > 10"
              [lvTotal]="selectedVolumes.length"
              #pageS
              lvMode="simple"
              [lvPageSize]="pageSize"
              [lvShowPageSizeOptions]="false"
              [lvPageSizeOptions]="pageSizeOptions"
            >
            </lv-paginator>
          </div>
        </div>
      </lv-group>
    </lv-form-control>
  </lv-form-item>
</lv-form>

<ng-template #mountTpl>
  <lv-search
    [(ngModel)]="mountName"
    (lvSearch)="searchMount($event)"
    [lvFocus]="true"
    style="width: 200px;"
  ></lv-search>
</ng-template>

<ng-template #nameTpl>
  <lv-search
    [(ngModel)]="mountName"
    (lvSearch)="searchMount($event)"
    [lvFocus]="true"
    style="width: 200px;"
  ></lv-search>
</ng-template>

<ng-template #nameTpl>
  <lv-search
    [(ngModel)]="name"
    (lvSearch)="searchName($event)"
    [lvFocus]="true"
    style="width: 200px;"
  ></lv-search>
</ng-template>
